<template>
  <van-tabbar
    class="tabbar"
    v-model="active"
    :placeholder="true"
    :route="true"
    :border="true"
    safe-area-inset-bottom
    active-color="#000000"
    inactive-color="#666666"
    z-index="99"
    v-if="state.isShowTab"
    fixed
  >
    <van-tabbar-item v-for="(item, index) in tabbarData" :key="index" :to="item.to">
      <span>{{ item.title }}</span>
      <template #icon="props">
        <!--        <img :src="props.active ? item.inactive : item.active" />-->
        <img :src="getAssetsFile(props.active ? item.inactive : item.active)" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref, reactive, watch, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { getAssetsFile } from "@/utils/common";
// console.log(useRoute, "useRoute");
const active = ref(0);
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const tabbarData = reactive([
  {
    active: "icons/tabBar/home.png",
    inactive: "icons/tabBar/ahome.png",
    title: t("key698"),
    to: {
      name: "homePage"
    }
  },
  {
    active: "icons/tabBar/class.png",
    inactive: "icons/tabBar/aclass.png",
    title: t("key699"),
    to: {
      name: "classIfication"
    }
  },
  {
    active: "icons/tabBar/find.png",
    inactive: "icons/tabBar/afind.png",
    title: t("key700"),
    to: {
      name: "findPage"
    }
  },
  {
    active: "icons/tabBar/cart.png",
    inactive: "icons/tabBar/acart.png",
    title: t("key701"),
    to: {
      name: "shopCart"
    }
  },
  {
    active: "icons/tabBar/user.png",
    inactive: "icons/tabBar/auser.png",
    title: t("key702"),
    to: {
      name: "userPage"
    }
  }
]);
const route = useRoute();
const state = reactive({
  isShowTab: false //默认展示底部的tab
});
watch(
  () => route.meta,
  (val: any) => {
    state.isShowTab = val.isTab ? val.isTab : false;

    console.log(state.isShowTab);
  },
  {
    immediate: true
  }
);
watchEffect(() => {
  let m = route.meta;
  console.log(route.meta);
});
</script>

<style scoped>
.tabbar {
  /*  position: fixed;*/
  /*  bottom: 0;*/
  /*  left: 0;*/
  /*  width: 100%;*/
  /*  transform: rotate(0);*/

  /* 形成包含块，使得 fided 定位的子元素 tabbar 的百分百宽度能够基于这个元素 */
}
</style>
